
@charset "UTF-8";
@import url('displaFlex');


@safeWidth:1100px;        //安全宽度

@safeMainColor:#01cbe9;       //主题颜色
@safeMinorColor:#ff6f6e;       //主题颜色

@borderColor:#dcdcdc;     //边框颜色
@25mainWordColor:#252525;   //文字主体颜色
@4aviceWordColor:#4a4a4a;   //文字副级颜色
@99minorWordColor:#999999;  //文字次要颜色


.w_h(@w_h){
  width: @w_h ;
  height: @w_h ;
}

//文字溢出
//多行
.wordSpaceClamp(@number){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@number;
  overflow: hidden;
}
//单行
.wordSpaceClamp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hover(@color){
  &:hover{
    background-color: @color;
    color: #FFFFFF;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    transition: all 1s cubic-bezier(0, 0.72, 0.35, 1.12);
  }
}


.group{

  position: relative;
  &:after{
    content: '';
    width: 100%;
    border-bottom: 2px solid @safeMainColor;
    position: absolute;
    left: 0;
    bottom: -10px;
  }
}

nav{
  border-bottom: 1px solid @borderColor;
}

//面包屑导航
.nav{
  width: @safeWidth;
  margin:20px auto;
  a{
    font-size: 16px;
    color: #4a4a4a;
  }
  :nth-child(1){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    background-size: 6px 11px;
    margin-right: 10px;
  }
  :nth-child(2){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    background-size: 6px 11px;
    margin-right: 10px;
  }
}

main{
  width: @safeWidth;
  margin: 0 auto;
  .groupInfo{
    width:1060px;
    height:85px;
    .displayFlex;
    .flex-direction-row;
    .flex-align-items;
    border:1px solid @borderColor;
    border-radius: 6px;
    padding: 30px 20px;

    .groupLogo{
      .w_h(80px);
      display: block;
      margin-right:16px;
      border-radius: 6px;
    }

    .infoText{
      .displayFlex;
      .flex-direction-column;
      width: 850px;

      .info{
        .displayFlex;
        .flex-direction-row;
        .flex-align-items;
        margin-bottom: 3px;
        .groupName{
          font-size: 20px;
          color: @25mainWordColor;
           margin-right: 28px;
          font-weight:normal;
        }
        span{
          color:@99minorWordColor;
          font-size: 16px;
          margin-right: 20px;
        }


      }
      .groupJianjie{
        font-size: 16px;
        color:@4aviceWordColor;
        .wordSpaceClamp(2)


      }

    }

    .btnBox{
      margin-left:50px;
      .displayFlex;
      .flex-direction-column;
      a{
        font-size: 14px;
        height: 24px;
        width: 80px;
        text-align: center;
        line-height: 24px;
        color: white;
        border-radius: 4px;
      }
      .fabu{
        background: @safeMinorColor;
        margin-bottom: 5px;

      }
      .go{
        background: @safeMainColor;

      }
    }


  }


}



.groupList{
  .displayFlex;
  width:@safeWidth;
  margin: 0 auto;
  margin-top: 60px;
  .displayFlex;
  .flex-direction-row;
  .leftGroupPost{
    width: 760px;
    .leftTitleMore{
      width: 100%;
      .displayFlex;
      .flex-justify-between;
      .flex-align-items;
      height: 50px;
      border-bottom: 1px solid @borderColor;
      span{
        font-size: 24px;
        color: @25mainWordColor;
        font-weight: 500;

      }

      .sendPost{
        width: 58px;
        height: 28px;
        border-radius: 4px;
        background: @safeMinorColor;
        color: white;
        text-align: center;
        line-height: 28px;

      }
      margin-bottom: 40px;

    }
    .groupListItem{


      .displayFlex;
      .flex-direction-column;
      border:1px solid @borderColor;
      padding: 24px 0 24px 24px;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 20px;

      //用户信息
      .authorInfo{
        .displayFlex;
        .flex-direction-row;
        .flex-justify-between;
        .flex-align-items;
        margin-bottom: 10px;
        .info{
          .displayFlex;
          .flex-direction-row;
          .flex-align-items;
          img{
            display: block;
            .w_h(36px);
            margin-right: 20px;
            border-radius: 6px;
          }
          .infoText {
            .displayFlex;
            .flex-direction-row;
            .text {
              .userName {
                font-size: 16px;
                color: @25mainWordColor;
                padding-right: 30px;
                display: table-cell;
              }
              time {
                font-size: 12px;
                color: @99minorWordColor;
              }

            }

          }
        }

        .todo{
          margin-right: 24px;
          .displayFlex;
          .flex-direction-row;
          .flex-align-items;
          .adminDelAll,.adminDelThis{
            font-size: 12px;
            color: @99minorWordColor;
            margin-right: 24px;
            display: none;
          }
          .userComment{
            width: 48px;
            height: 24px;
            display: block;
            color: @safeMainColor;
            border:1px solid @safeMainColor;
            border-radius: 4px;
            .hover(@safeMainColor);
            text-align: center;
          }
        }

      }
      //帖子内容
      .postContent{
        margin-left: 55px;
        width: 635px;
        .postTitle {
          font-size: 18px;
          color: @25mainWordColor;
          margin-bottom: 10px;
          .displayFlex;

          &:hover {
            text-decoration: underline;
          }

        }
        .userText {
          font-size: 16px;
          color: @4aviceWordColor;
          display: inline;
          a {
            font-size: 14px;
            color: @safeMinorColor;
            padding-right: 7px;
            background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
            background-size: 6px 12px;
            display: inline;

            &:hover {
              text-decoration: underline;
            }

          }
        }
        .adminText {
          .displayFlex;
          .flex-direction-row;

          .adminCoverImgBox{
            width: 218px;
            height: 144px;
            border-radius: 6px;
            margin-right: 12px;
            position: relative;
            overflow: hidden;
            img {
              position: absolute;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%, -50%);
              -moz-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              -o-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
            }
          }
          p {
            width: 420px;
            word-break: break-all;
          }


        }
        .text{
          a {
            font-size: 14px;
            color: @safeMinorColor;
            padding-right: 7px;
            background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
            background-size: 6px 12px;
            display: inline;

            &:hover {
              text-decoration: underline;
            }

          }
        }


      }
      //用户图片
      .postImg{
        margin-left: 55px;
        width: 635px;
        margin-top: 20px;
        .imgList{
          .displayFlex;
          .flex-direction-row;
          li{
            margin-right: 10px;
            position: relative;
            overflow: hidden;
            .w_h(140px);
            border-radius: 6px;

            img{

              position: absolute;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%, -50%);
              -moz-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              -o-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);

            }
          }
        }


      }

      //帖子交互信息
      .postInfo{
        .displayFlex;
        .flex-direction-row;
        margin-top: 20px;
        margin-left: 55px;
        position: relative;

        span{
          padding-left:20px ;
          color: @99minorWordColor;
          font-size: 14px;
          margin-right: 16px;
        }
        span:nth-child(1){
          background: url("../publicImg/shequ-dianzan@2x.png") no-repeat left;
          background-size: 16px 16px;
        }
        span:nth-child(2){
          background: url("../publicImg/shequ-liulan@2x.png") no-repeat left;
          background-size: 16px 16px;
        }
        span:nth-child(3){
          background: url("../publicImg/shequ-pinglun@2x.png") no-repeat left;
          background-size: 16px 16px;
        }


        .groupName {
          font-size: 14px;
          color: @safeMinorColor;
          margin-right: 30px;
          position: absolute;
          top: 0;
          right: 0;
          visibility: hidden;

          &:hover {
            text-decoration: underline;
          }

        }

      }



    }
  }

    .leftBox{
      .displayFlex;
      .flex-direction-column;
      .rightNewProduct{
        width: 290px;
        height: 650px;
        margin-left: 30px;
        border: 1px solid @borderColor;
        border-radius: 6px;
        padding: 0 10px;
        .toNewLoans{
          display: block;
          height: 50px;
          width: 100%;
          font-size: 24px;
          line-height: 50px;
          text-align: left;
          background: white url("../publicImg/jiantou-you-lan@2x.png") no-repeat right;
          background-size: 10px 17px;
          border-bottom: 1px solid #eeeeee;
          color: @25mainWordColor;
          margin-bottom: 10px;

        }

        .NewLoansProductList{

          .loansItem{
            .displayFlex;
            .flex-align-items;
            .flex-direction-row;
            margin-bottom: 20px;
            .loansLogo{
              display: block;

              .w_h(72px);
              border-radius: 6px;


            }
            .loanInfo{
              .displayFlex;
              .flex-align-items;
              .flex-direction-row;
              .flex-justify-between;
              width: 210px;
              margin-left: 10px;

              .loanInfoLeft{
                h3{
                  font-size: 18px;
                  color: @25mainWordColor;
                  line-height: 35px;
                  font-weight: normal;
                }
                p{
                  font-size: 14px;
                  color: @4aviceWordColor;
                  i{
                    color: @safeMinorColor;
                  }
                }
              }
              .loanInfoRight{
                p{
                  font-size: 16px;
                  color: @99minorWordColor;
                  margin-bottom: 15px;
                }
                a{
                  display: block;
                  width:58px ;
                  height: 36px;
                  color: white;
                  background-color: @safeMinorColor;
                  text-align: center;
                  line-height: 36px;
                  border-radius: 6px;
                  margin-top: 36px;
                  font-size: 18px;
                }
              }




            }

          }
        }

      }
      .hotLoanInnerRightBox{
        margin-left: 30px;
        border:1px solid @borderColor;
        border-radius: 6px;
        display: block;
        width: 310-20px;
        padding:0 10px;
        .toHotLoans{
          display: block;
          height: 53px;
          width: 100%;
          font-size: 24px;
          line-height: 53px;
          text-align: left;
          background: white url("../publicImg/jiantou-you-lan@2x.png") no-repeat right;
          background-size: 10px 17px;
          border-bottom: 1px solid #eeeeee;
          color: @25mainWordColor;
          margin-bottom: 30px;

        }
        .postItem{
          margin-bottom: 20px;
          .displayFlex;
          .flex-direction-row;
          img{
            width: 70px;
            height: 70px;
            border-radius: 6px;
            margin-right: 16px;
          }
          .postItemText{
            h4{
              font-size: 18px;
              width: 200px;
              color: @25mainWordColor;
              font-weight: normal;
              .wordSpaceClamp(2);
              letter-spacing: -1px;
            }
            .thumbsUpAndPageView{
              span{
                font-size: 14px;
                color:@99minorWordColor;
                padding-left:25px;
              }
              .thumbsUp{
                background: url("../publicImg/shequ-dianzan@2x.png") no-repeat left;
                background-size: 16px 16px;
                margin-right: 30px;

              }
              .pageView{
                background: url("../publicImg/shequ-liulan@2x.png") no-repeat left;
                background-size: 16px 16px;
              }
            }
          }

        }
        a:last-child{
          margin-bottom: 0px;
        }

      }
      position: relative;
      .fixRight{
        position: fixed;
        top: 75px;
        right: 11%;

      }

      .positionBottom{
        position: absolute;
        left: 0;
        bottom: 100px;
      }
    }


  .ButtonMore{
    .displayFlex;
    .flex-justify-align;
    width: 400px;
    margin: 0 auto;
    height: 48px;
    background-color:#ffae00;
    font-size: 18px;
    color: #fff;
    border-radius: 6px;
    margin-top: 40px;
    img{margin-left: 6px;
      display: block}


  }
  margin-bottom: 60px;
}





article{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  .flex-justify-align;
  section{
    width:930px;
    height: 700px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.81);
    position: relative;
    #closeDajindai{
      position: absolute;
      top:-15px;
      right:-15px;
      img{
        .w_h(30px);
      }
    }
    .section_top{
      width: 890px;
      margin: 0 auto;
      height: 70px;


      .displayFlex;
      .flex-direction-row;
      .flex-align-items;
      .flex-justify-between;
      .leftBox{
        width: 420px;
        height: 70px;
        .displayFlex;
        .flex-direction-row;
        .flex-align-items;
        border-bottom: 1px solid #eeeeee;

        img{
          .w_h(44px);

        }
        ul{
          .displayFlex;
          .flex-direction-row;
          .flex-align-items;
          li{
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;

            i{
              .w_h(16px);
              font-size: 14px;
              color: white;
              background-color: #cdcdcd;
              .flex-justify-align;
              border-radius: 50%;
              margin-right:6px;
            }
            span{
              font-size: 18px;
              color: @25mainWordColor;
            }
            margin-left: 20px;
          }

        }


      }
      .rightBox{
        .displayFlex;
        .flex-direction-row;
        img{
          .w_h(62px);
          margin-right: 15px;
        }
        .text{
          h3{
            font-size: 24px;
            color: @25mainWordColor;
            font-weight: normal;
            font-family: "微软雅黑 Regular";
          }
          p{
            font-size: 18px;
            color: @25mainWordColor;
            font-family: "微软雅黑 Regular";
          }
        }

      }
    }
    .section_bottom{
      margin-left: 40px;
      margin-top:24px;
      .displayFlex;
      .flex-direction-column;
      .baseBox{
        position: relative;
        .displayFlex;
        .flex-direction-row;
        margin-bottom: 20px;
        .leftBox{
          font-size: 18px;
          color: @4aviceWordColor;
          width: 200px;
        }
        i{
          display: block;
          width: 390px;
          height: 34px;
          padding-left: 30px;
          border-radius: 4px;
          background: #f6f6f6 url("../publicImg/jiantou-xia-hui@2x.png") no-repeat 390px 12px;
          background-size: 20px 11px;
          color: @99minorWordColor;
          line-height: 34px;
          font-size: 16px;
          cursor: pointer;


        }
        input{

          display: block;
          width: 390px;
          height: 34px;
          padding-left: 30px;
          border-radius: 4px;
          background: #f6f6f6 url("../publicImg/jiantou-xia-hui@2x.png") no-repeat 390px 12px;
          background-size: 20px 11px;
          color: @4aviceWordColor;
          line-height: 34px;
          font-size: 16px;

        }
        .clickInput{
          border: 1px solid @safeMainColor;
          color:@99minorWordColor;
        }
        .chooseItem{
          position: absolute;
          top:38px;
          left: 200px;
          border: 1px solid #dcdcdcdc;
          max-width: 650px;
          min-width: 420px;
          background-color: #fcfcfc;
          z-index: 200;
          .displayFlex;
          .flex-direction-row;
          .flex-wrap;
          border-radius:6px ;
          span{
            color: #4a4a4a;
            font-size: 14px;
            padding:0 5px;
            margin: 0 5px;
            min-width: 100px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            border-radius: 6px;
            .hover(@safeMainColor);
            .wordSpaceClamp;

          }
          .clickSpan{
            background-color: @safeMainColor;
            color: #FFFFFF;
          }
          cursor: pointer;
        }

        .chooseCityBox{
          position: absolute;
          top:38px;
          left: 200px;
          z-index: 1000000;
          width: 600px;
          background: white;
          border:1px solid @safeMainColor;
          border-radius: 6px;
          min-height: 242px;
          padding: 22px 20px 20px 22px;
          .topBox{
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;
            .flex-justify-between;
            width: 100%;
            p{
              font-size: 16px;
              color: @25mainWordColor;
              .displayFlex;
              .flex-direction-row;
              i{
                background: none;
                width: auto;
                height: auto;
                padding: 0;
                line-height: normal;

              }
            }
            span{
              cursor:pointer;
              img{
                max-width: 20px;
                max-height: 20px;
                display: block;
              }
            }
          }
          .nav{
            .displayFlex;
            .flex-direction-row;
            border-bottom: 1px solid @borderColor;
            span{

              font-size: 16px;
              color:@safeMainColor;
              margin-right:30px;
              height: 38px;
              line-height: 38px;
              cursor:pointer;

              &:hover {
                font-size: 18px;
                text-shadow: 1px 0 8px #01cbe9;
                transition: all 0.3s ease-in-out;
              }

            }

            .span_bottom{
              font-weight: 600;
              border-bottom: 3px solid @safeMainColor;
            }

          }
          .cityList{
            .displayFlex;
            .flex-direction-column;
            .firstLetter{
              .displayFlex;
              .flex-direction-row;
              .nameP{
                font-size: 18px;
                color:@safeMainColor;
                margin-right:28px;
                margin-top: 10px;

              }
              .cityListInner{
                .displayFlex;
                .flex-direction-row;
                .flex-wrap;

                span{

                  width: 110px;
                  height: 20px;
                  font-size: 14px;
                  color: @4aviceWordColor;
                  margin-top: 10px;
                  cursor:pointer;
                  .wordSpaceClamp(1);

                }

              }
              &:hover {
                border-radius: 6px;
                background-color: #f6f6f6;
                transition: all 1s ease-in-out;
              }
            }
            .hotCity{
              .displayFlex;
              .flex-direction-row;
              .flex-wrap;
              margin-left: 64px;

              span{
                display: block;
                width: 105px;
                font-size: 16px;
                color: @4aviceWordColor;
                margin-top: 20px;
                cursor:pointer;

              }


            }
          }

        }

      }
      .baseBox_city{
        position: relative;
        .displayFlex;
        .flex-direction-row;
        margin-bottom: 20px;
        .leftBox{
          font-size: 18px;
          color: @4aviceWordColor;
          width: 200px;
        }
        i{
          display: block;
          width: 390px;
          height: 34px;
          padding-left: 30px;
          border-radius: 4px;
          background: #f6f6f6 url("../publicImg/jiantou-xia-hui@2x.png") no-repeat 390px 12px;
          background-size: 20px 11px;
          color: @99minorWordColor;
          line-height: 34px;
          font-size: 16px;
          cursor: pointer;


        }
        .clickInput{
          border: 1px solid @safeMainColor;
          color:@4aviceWordColor;
        }
        .chooseCityBox{
          position: absolute;
          top:38px;
          left: 200px;
          z-index: 1000000;
          width: 600px;
          background: white;
          border:1px solid @safeMainColor;
          border-radius: 6px;
          min-height: 242px;
          padding: 22px 20px 20px 22px;
          .topBox{
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;
            .flex-justify-between;
            width: 100%;
            p{
              font-size: 16px;
              color: @25mainWordColor;
              .displayFlex;
              .flex-direction-row;
              i{
                background: none;
                width: auto;
                height: auto;
                padding: 0;
                line-height: normal;

              }
            }
            span{
              cursor:pointer;
              img{
                max-width: 20px;
                max-height: 20px;
                display: block;
              }
            }
          }
          .nav{
            .displayFlex;
            .flex-direction-row;
            border-bottom: 1px solid @borderColor;
            span{

              font-size: 16px;
              color:@safeMainColor;
              margin-right:30px;
              height: 38px;
              line-height: 38px;
              cursor:pointer;

              &:hover {
                font-size: 18px;
                text-shadow: 1px 0 8px #01cbe9;
                transition: all 0.3s ease-in-out;
              }

            }

            .span_bottom{
              font-weight: 600;
              border-bottom: 3px solid @safeMainColor;
            }

          }
          .cityList{
            .displayFlex;
            .flex-direction-column;
            .firstLetter{
              .displayFlex;
              .flex-direction-row;
              .nameP{
                font-size: 18px;
                color:@safeMainColor;
                margin-right:28px;
                margin-top: 10px;

              }
              .cityListInner{
                .displayFlex;
                .flex-direction-row;
                .flex-wrap;

                span{

                  width: 110px;
                  height: 20px;
                  font-size: 14px;
                  color: @4aviceWordColor;
                  margin-top: 10px;
                  cursor:pointer;
                  .wordSpaceClamp(1);

                }

              }
              &:hover {
                border-radius: 6px;
                background-color: #f6f6f6;
                transition: all 1s ease-in-out;
              }
            }
            .hotCity{
              .displayFlex;
              .flex-direction-row;
              .flex-wrap;
              margin-left: 64px;

              span{
                display: block;
                width: 105px;
                font-size: 16px;
                color: @4aviceWordColor;
                margin-top: 20px;
                cursor:pointer;

              }


            }
          }

        }

      }

      .btnNext{
        width: 500px;
        margin: 0 auto;
        margin-top: 50px;
        .displayFlex;
        .flex-direction-row;
        button{
          color: @safeMainColor;
          border:1px solid @safeMainColor;
          border-radius: 6px;
          height: 40px;
          width: 100%;
          .hover(@safeMainColor)

        }
      }

    }
  }

}







